<template>
    <div>
        <h1 style="text-align: center;">角色修改</h1>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="角色名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="权限分配">
                <el-tree
                    ref="auths"
                    :data="form.auths"
                    show-checkbox
                    :props="defaultProps"
                    accordion
                    node-key="_id" 
                    :default-checked-keys="checkedAuths"
                    :default-expanded-keys="openAuths"
                >
            </el-tree>
            </el-form-item>
            <el-form-item>
                <el-button
                type="primary"
                @click="handleEdit()">修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {role, authList, roleEdit} from '@/request'
export default {
    created() {
        let id = this.$route.query.id
        this.id = id
        // console.log(id);
        // 根据id获取当前角色名称和所有权限
        this.getAuthList(id)
        // this.getOneRole(id)
    },
    data () {
        return {
            id: '',
            form: {
                name: '',
                auths: [] // 所有权限
            },
            checkedAuths: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            openAuths: [],
            data: []
        }
    },
    methods: {
        getOneRole(id) {
            role(id).then(data => {
                // console.log(data);
                this.form.name = data.data.role.name
                // 获取所有父权限组成数组
                let parentIds = this.form.auths.map(item => item._id)
                // 从当前角色具有的所有权限中剔除父权限
                let arr = []
                // 遍历当前所有权限
                data.data.role.auths.forEach(item => {
                    // 当前权限是否在父权限中
                    let index = parentIds.indexOf(item)
                    // 不在
                    if(index < 0) {
                        arr.push(item)
                    } else {
                        // 在 - 判断这个父权限下是否有子权限
                        if(!this.form.auths[index].children || this.form.auths[index].children.length === 0) {
                            arr.push(item)
                        }
                    }
                }) 
                this.checkedAuths = arr
                // 筛选出被选中的一级权限
                // console.log(this.form.auths);
                this.openAuths = this.form.auths.filter(item => data.data.role.auths.indexOf(item._id) >= 0)
            })
        },
        getAuthList(id) {
            authList().then(data => {
                this.form.auths = data.data.authlist
                this.getOneRole(id)
            })
        },
        handleEdit() {
            // 只能获取到子 - 无法获取到父
            let selectedAllAuths = this.$refs.auths.getCheckedNodes()
            // 将所有选中权限的id存储到数组中
            let authArr = selectedAllAuths.map(item => item._id)
            // 从选中的所有当中将所有的父id获取到
            let selectedAllParentAuths = selectedAllAuths.map(item => item.parentId)
            // 遍历所有父id
            selectedAllParentAuths.forEach(item => {
                // 如果父id不是0 - 排除掉一级权限
                if(item != '0') {
                    // 在所有id中找是否有父id
                    let index = authArr.indexOf(item)
                    // 如果没有找到 - 说明选中的所有当中没有父id
                    if(index < 0) {
                        // 将父权限id添加到数组中
                        authArr.push(item)
                    }
                }
            })
            // console.log(22, authArr);
            // 发请求将form中的name和authArr添加到数据库中
            roleEdit({id: this.id, name: this.form.name, auths: authArr}).then(data => {
                // console.log(data);
                let {error_code, msg} = data
                if(error_code === 200) {
                    this.$message({
                        type: 'success',
                        duration: 1500,
                        message: msg,
                        onClose: () => {
                            this.$router.push('/role/list')
                        }
                    })
                } else {
                    this.$message({
                        type: 'error',
                        duration: 1500,
                        message: msg
                    })
                }
            })
        }
    }
}
</script>

<style>
    
</style>
